<?xml version="1.0" encoding="UTF-8" ?>
<%@page import="javax.servlet.jsp.jstl.fmt.LocalizationContext"%>
<%@page import="java.util.ResourceBundle"%>
<%@page import="java.util.Calendar"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@ page import="org.jakim.entity.*"%>
<%@ page import="org.jakim.utils.*"%>
<%@page import="org.apache.taglibs.standard.tlv.JstlCoreTLV"%>
<%@page import="org.apache.taglibs.standard.tlv.JstlFmtTLV"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<fmt:setLocale value="en" />
<fmt:setBundle basename="org.jakim.messages.messages" var="msg"
	scope="session" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
<link href="../styles/main.css" rel="stylesheet" type="text/css" />
<link href="../styles/wizard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">

function setOnwards(chkBox) {
   document.getElementById('cbToMonth').disabled = chkBox.checked;
   document.getElementById('cbToYear').disabled = chkBox.checked;
   chkBox.value = chkBox.checked;
}

</script>
</head>
<body style="overflow: auto;">
	<%
	HttpSession httpSeesion = request.getSession();
	PersonalSkill personalSkills = null;
	
	Object objPersonalSkills = httpSeesion.getAttribute("attrPersonalSkills");
	
	if (objPersonalSkills != null && 
		objPersonalSkills instanceof PersonalSkill){
			personalSkills = (PersonalSkill) objPersonalSkills;
		}
%>
	<div id="divBodyContainer">
		<h1>
			<fmt:message key="PERSONALSKILLS.HEADER" />
		</h1>

		<p>
			<fmt:message key="PERSONALSKILLS.SUMMARY" />
		</p>

		<button id="addButton">
			<fmt:message key="PERSONALSKILLS.ADDSKILLS.BUTTON" />
		</button>

		<div class="wizardHistoryBody">
			<%
	   			if (personalSkills != null ){
	   				%>
			<table id="addedSkillsTable" class="userEntriesTable">
				<tr>
					<th><fmt:message
							key="PERSONALSKILLS.SKILLS.TABLE.HEADER.LABEL" /></th>
				</tr>

				<tr>
					<td class="colParam"><fmt:message
							key="PERSONALSKILLS.FORM.SOCIAL.SKILLS.LABEL" />:</td>
					<td class="colValue"><%=personalSkills.getSkillSocial() %></td>
				</tr>

				<tr>
					<td class="colParam"><fmt:message
							key="PERSONALSKILLS.FORM.ORGANIZATIONAL.SKILLS.LABEL" />:</td>
					<td class="colValue"><%=personalSkills.getSkillOranisational() %>
					</td>
				</tr>

				<tr>
					<td class="colParam"><fmt:message
							key="PERSONALSKILLS.FORM.TECHNICAL.SKILLS.LABEL" />:</td>
					<td class="colValue"><%=personalSkills.getSkillTechnical() %>
					</td>
				</tr>

				<tr>
					<td class="colParam"><fmt:message
							key="PERSONALSKILLS.FORM.ARTISTIC.SKILLS.LABEL" />:</td>
					<td class="colValue"><%=personalSkills.getSkillArtistic() %></td>
				</tr>

				<tr>
					<td class="colParam"><fmt:message
							key="PERSONALSKILLS.FORM.COMPUTER.SKILLS.LABEL" />:</td>
					<td class="colValue"><%=personalSkills.getSkillComputer() %></td>
				</tr>

				<tr>
					<td class="colParam"><fmt:message
							key="PERSONALSKILLS.FORM.OTHER.SKILLS.LABEL" />:</td>
					<td class="colValue"><%=personalSkills.getSkillOther() %></td>
				</tr>
				<tr>
					<td class="colParam"><fmt:message
							key="PERSONALSKILLS.FORM.DRIVING.LICENCE.LABEL" />:</td>
					<td class="colValue"><%=personalSkills.getSkillDrivingLicence().toString().replaceAll("[\\[\\]]", "") %>
					</td>
				</tr>
			</table>
			<%
   				}
   			%>

		</div>
		<div id="shade"></div>
		<div id="modalForm" style="top: 3em;">
			<form id="formPersonalSkills" class="formExperience"
				action="../addinfo" method="post">
				<fieldset id="fsetPersonalSkills" class="fsetWizard">
					<legend>
						<fmt:message key="PERSONALSKILLS.FORM.LABEL" />
						:
					</legend>
					<div id="divSocialSkills">
						<label id="lblSocialSkills" for="txtSocialSkills"> <fmt:message
								key="PERSONALSKILLS.FORM.SOCIAL.SKILLS.LABEL" />:
						</label>
						<textarea id="txtSocialSkills" name="skillSocial"></textarea>
					</div>

					<div id="divOrganizationalSkills">
						<label id="lblOrganizationalSkills" for="txtOrganizationalSkills">
							<fmt:message
								key="PERSONALSKILLS.FORM.ORGANIZATIONAL.SKILLS.LABEL" />:
						</label>
						<textarea id="txtOrganizationalSkills" name="skillOrganizational"></textarea>
					</div>

					<div id="divTechnicalSkills">
						<label id="lblTechnicalSkills" for="txtTechnicalSkills"> <fmt:message
								key="PERSONALSKILLS.FORM.TECHNICAL.SKILLS.LABEL" />:
						</label>
						<textarea id="txtTechnicalSkills" name="skillTechnical"></textarea>
					</div>

					<div id="divArtisticSkills">
						<label id="lblArtisticSkills" for="txtArtisticSkills"> <fmt:message
								key="PERSONALSKILLS.FORM.ARTISTIC.SKILLS.LABEL" />:
						</label>
						<textarea id="txtArtisticSkills" name="skillArtistic"></textarea>
					</div>

					<div id="divComputerSkills">
						<label id="lblComputerSkills" for="txtComputerSkills"> <fmt:message
								key="PERSONALSKILLS.FORM.COMPUTER.SKILLS.LABEL" />:
						</label>
						<textarea id="txtComputerSkills" name="skillComputer"></textarea>
					</div>

					<div id="divOtherSkills">
						<label id="lblOtherSkills" for="txtOtherSkills"> <fmt:message
								key="PERSONALSKILLS.FORM.OTHER.SKILLS.LABEL" />:
						</label>
						<textarea id="txtOtherSkills" name="skillOther"></textarea>
					</div>

					<div id="divDrivingLicenceSkills">
						<label id="lblDrivingLicenceSkills" for="txtDrivingLicenceSkills">
							<fmt:message key="PERSONALSKILLS.FORM.DRIVING.LICENCE.LABEL" />:
						</label>
						<table id="drivingLicense">
							<%
                            		int rowCount = 0;
                            	 	boolean trOpen = false;
                            		for(DrivingLicence drv: DrivingLicence.values()){
                            			if(rowCount % 3 == 0 && !trOpen){
                           				%>
							<tr>
								<%
                           				trOpen = true;
                            			}
                            			rowCount++;
                            			%>
								<td><input type="checkbox" name="drivingLincense"
									value="<%=drv.name() %>" /><br /> <img
									src="<%=drv.getDrivingLicensePicPath() %>" width="90px"
									height="30px" /></td>
								<% 
           								if(rowCount % 3 == 0 && trOpen){
                        				%>
							</tr>
							<%
                        					trOpen = false;
           								}
                            		}
                            		if(trOpen){
                            			trOpen = false;
                           			%>
							</tr>
							<%
                            		}
                            	%>
						</table>
					</div>

					<input type="hidden" value="3" name="numberCVWizardStep" />
				</fieldset>
				<button type="submit">
					<fmt:message key="SUBMIT.BUTTON" />
				</button>
			</form>
		</div>
		<button id="next"
			onclick="window.location.href = 'languageswizard.jsp'">
			<fmt:message key="NEXT.BUTTON" />
		</button>
		<script type="text/javascript">        
            var modal= document.getElementById('modalForm');
            var shade= document.getElementById('shade');
            document.getElementById('addButton').onclick= function() {
                modal.style.display=shade.style.display= 'block';
            };
            
            document.getElementById('close').onclick= function() {
                modal.style.display = shade.style.display = 'none';
            };

            // This code is a workaround for IE6's lack of support for the
            // position: fixed style.
            //
            if (!('maxHeight' in document.body.style)) {
                function modalsize() {
                    var top= document.documentElement.scrollTop;
                    var winsize= document.documentElement.offsetHeight;
                    var docsize= document.documentElement.scrollHeight;
                    shade.style.height= Math.max(winsize, docsize)+'px';
                    modal.style.top= top+Math.floor(winsize/5)+'px';
                };
                modal.style.position=shade.style.position= 'absolute';
                window.onscroll=window.onresize= modalsize;
                modalsize();
            }
        </script>
	</div>
</body>
</html>